<template>
	<view class="content" style="padding: 15px;" :style="$theme.pageStyle">
		<!-- <view class="tips color_fff size_12 align_c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">{{ajax.loadText}}</view> -->
		<view class="box-1" id="list-box">

			<view class="talk-list">

				<view class="reboot">
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/08171280212884IQ0X.png"
						mode=""></image>
					<view class="text_item">
						<view class="text_item1">你好，我是案情评测机器人</view>
						<view class="text_item2">请完成评测查看个人风险报告哦~</view>
					</view>
				</view>

				<view class="report">
					<view class="left">
						<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/201712803820xzsrcU.png"
							mode=""></image>
						<view class="center">
							专属报告 <span>可快速下单</span>
						</view>
					</view>

					<view class="right">
						<uni-icons type="right" size="25" color="#999"></uni-icons>
					</view>
				</view>

				<view class="message">
					您好，这里是匠心咨询中心，我们已处理5000+劳动纠纷。接下来会问您几个问题，用于案情梳理，您将了解在证据充足情况下，可获得的最大补偿金额。(信息仅用于案情分析，绝不泄露)
				</view>



				<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
					
					<view class="problem_item" v-if="item.type === 'problem'">

						<view class="problem_title">
							<view class="problem_title_type">[单选]</view>
							<view class="problem_title_title">你遇到如下哪种劳动纠纷呢？</view>
						</view>

						<view class="problem_answer_item">
							公司拖欠/克扣了我的工资
						</view>
						
						<view class="problem_answer_item">
							公司拖欠/克扣了我的工资
						</view>
						<view class="problem_answer_item">
							公司拖欠/克扣了我的工资
						</view>

						<view class="problem_answer_submit">
							确认
						</view>
					</view>
					
					<view class="message" v-if="item.type === 'message'">
						您好，这里是匠心咨询中心，我们已处理5000+劳动纠纷。接下来会问您几个问题，用于案情梳理，您将了解在证据充足情况下，可获得的最大补偿金额。(信息仅用于案情分析，绝不泄露)
					</view>
					
				</view>


				<view class="end_message">
					<view class="top_bg">
					<view class="tops">
						<view>您可获赔总金额</view>
						<view>结果仅供参考</view>
					</view>
					<view class="center">
						500000 <span>元</span>
					</view>
					<view class="btn">
						在证据充足的情况下，您通过维权可获得赔
					</view>
				</view>
				
				<view class="btn_bg">
					<view class="mingxi">赔偿金额明细</view>
					<view class="title">
						<view class="left_sub_box">
							<view class="yuan">1</view>
							拖欠工资赔偿
						</view>
						<view class="price_box">
							50000 <span>元</span>
						</view>
					</view>
					<view class="title">
						<view class="left_sub_box">
							<view class="yuan">2</view>
							拖欠工资赔偿
						</view>
						<view class="price_box">
							50000 <span>元</span>
						</view>
					</view>
					<view class="title">
						<view class="left_sub_box">
							<view class="yuan">3</view>
							拖欠工资赔偿
						</view>
						<view class="price_box">
							50000 <span>元</span>
						</view>
					</view>
				</view>
				</view>
				
				<view class="report_end">
					<view class="car">
						<view class="title">
							生成专属法律报告
						</view>
						<view class="content">
							根据您的案情，为您生成专属法律报告
						</view>
						<view class="bottom">
							<view class="but">
								点击查看
							</view>
						</view>
					</view>
				</view>
				

			</view>
		</view>
		<view class="box-2">
			<view class="flex_col">


				<view class="evaluate">重新测评</view>
				<!-- <view class="flex_grow">
					<input type="text" class="content" v-model="content" placeholder="请输入聊天内容" placeholder-style="color:#DDD;" :cursor-spacing="6">
				</view>
				<button class="send" @tap="send">发送</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				id:'',
				talkList: [],
				ajax: {
					rows: 20, //每页数量
					page: 1, //页码
					flag: true, // 请求开关
					loading: true, // 加载中
					loadText: '正在获取消息'
				},
				content: ''
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getHistoryMsg();
			});
		},
		onLoad(opt) {
			this.id = opt.id
		},
		methods: {
			// 获取历史消息
			getHistoryMsg() {
				let data = {
					'id': this.id
				}
				$H.post('index/caseEvaluationIndex', data, {
					token: true
				}).then(res => {
					var list = res.data;
					for (let i = 0; i < list.length; i++) {
						//将数据逐条写入数组
						this.talkList.push(list[i]);
					}
				})
			},
			// 设置页面滚动位置
			setPageScrollTo(selector) {
				let view = uni.createSelectorQuery().in(this).select(selector);
				view.boundingClientRect((res) => {
					uni.pageScrollTo({
						scrollTop: res.top - 30, // -30 为多显示出大半个消息的高度，示意上面还有信息。
						duration: 0
					});
				}).exec();
			},
			// 发送信息
			send() {
				if (!this.content) {
					uni.showToast({
						title: '请输入有效的内容',
						icon: 'none'
					})
					return;
				}

				uni.showLoading({
					title: '正在发送'
				})
				setTimeout(() => {
					uni.hideLoading();

					// 将当前发送信息 添加到消息列表。
					let data = {
						"id": new Date().getTime(),
						"content": this.content,
						"type": 1,
						"pic": "/static/logo.png"
					}
					this.talkList.push(data);

					this.$nextTick(() => {
						// 清空内容框中的内容
						this.content = '';
						uni.pageScrollTo({
							scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
							duration: 0
						});
					})
				}, 1500);
			}
		}
	}
</script>

<style lang="scss">
	// @import "../../lib/global.scss";
	page {
		font-size: 28rpx;
		background: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
	}

	.evaluate {
		background: #5fc496;
		color: #fff;
		padding: 5px 10px 5px 10px;
		border-radius: 16px;
		font-size: 14px;
	}

	.reboot {
		display: flex;
		height: 55px;

		image {
			width: 55px;
			height: 55px;
			margin-right: 15px;
		}

		.text_item {
			height: 55px;

			.text_item1 {
				color: #393838;
				font-weight: bold;
				font-size: 20px;
				height: 30px;
				line-height: 30px;
			}

			.text_item2 {
				color: #666;
				font-size: 16px;
				height: 25px;
				line-height: 25px;
			}
		}
	}


	.problem_item {
		background: #fff;
		padding: 15px;
		margin-top: 15px;
		border-radius: 15px;

		.problem_title {
			display: flex;
			border-bottom: #ccc 1px solid;
			padding-bottom: 5px;
			font-size: 16px;
			font-weight: bold;
			line-height: 30px;

			.problem_title_type {
				color: #0099ff;
				margin-right: 5px;
			}

			.problem_title_title {}
		}

		.problem_answer_item {
			margin-top: 15px;
			border: #ccc 1px solid;
			padding: 10px;
			border-radius: 5px;
			color: #666;
		}

		.problem_answer_submit {
			margin-top: 15px;
			height: 40px;
			line-height: 40px;
			color: #fff;
			text-align: center;
			background: #0099ff;
			border-radius: 25px;
		}
	}



	.report {
		display: flex;
		background: #fff;
		margin-top: 15px;
		padding: 10px;
		border-radius: 8px;
		justify-content: space-between;

		.left {
			height: 30px;

			image {
				width: 30px;
				height: 30px;
			}

			display: flex;
		}

		.center {
			line-height: 30px;
			margin-left: 10px;

			span {
				font-size: 12px;
				color: #666;
				margin-left: 15px;
			}
		}

		.right {}
	}

	.message {
		background: #fff;
		border-radius: 15px;
		padding: 15px;
		margin-top: 15px;
	}




	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 行式弹性盒子 */
	.flex_row {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		flex-wrap: wrap;
	}

	/* 弹性盒子居中对齐 */
	.flex_col.flex_center,
	.flex_row.flex_center {
		justify-content: center;
	}

	/* 列式弹性盒子两端对齐 */
	.flex_col.flex_space {
		justify-content: space-between;
	}

	/* 弹性盒子快速分栏 ,这里非常郁闷 uniapp 居然不支持 * 选择器 */
	.flex_col.flex_col_2>view {
		width: 50%;
	}

	.flex_col.flex_col_3>view {
		width: 33.33333%;
	}

	.flex_col.flex_col_4>view {
		width: 25%;
	}

	.flex_col.flex_col_5>view {
		width: 20%;
	}

	.flex_col.flex_col_6>view {
		width: 16.66666%;
	}

	/* 字体颜色 */
	.color_333 {
		color: #333;
	}

	.color_666 {
		color: #666;
	}

	.color_999 {
		color: #999;
	}

	.color_ccc {
		color: #ccc;
	}

	.color_fff {
		color: #fff;
	}

	.color_6dc {
		color: #6dca6d;
	}

	.color_d51 {
		color: #d51917;
	}

	.color_09f {
		color: #0099ff;
	}

	/* 背景色*/
	.bg_fff {
		background-color: #ffffff;
	}

	/* 字体大小 */
	.size_10 {
		font-size: 20rpx;
	}

	.size_12 {
		font-size: 24rpx;
	}

	.size_14 {
		font-size: 28rpx;
	}

	.size_16 {
		font-size: 32rpx;
	}

	.size_18 {
		font-size: 36rpx;
	}

	.size_20 {
		font-size: 40rpx;
	}

	/* 字体加粗 */
	.font_b {
		font-weight: bold;
	}

	/* 对齐方式 */
	.align_c {
		text-align: center;
	}

	.align_l {
		text-align: left;
	}

	.align_r {
		text-align: right;
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 100;
	}

	/* 弹窗 */
	.shade_box {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		z-index: 101;
		min-width: 200rpx;
		min-height: 200rpx;
	}



	/* 加载数据提示 */
	.tips {
		position: fixed;
		left: 0;
		top: var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform: translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;

		&.show {
			transform: translateY(0);
		}
	}

	.box-1 {
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.box-2 {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #F3F3F3;

		/* 兼容iPhoneX */
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		>view {
			padding: 0 20rpx;
			height: 100rpx;
		}

		.content {
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
		}

		.send {
			background-color: #42b983;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;

			&:active {
				background-color: #5fc496;
			}
		}
	}

	.talk-list {
		padding-bottom: 20rpx;

		/* 消息项，基础类 */
		.item {
			padding: 20rpx 20rpx 0 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			/* 收到的消息 */
			&.pull {
				.content {
					margin-left: 32rpx;
					background-color: #fff;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.content {
					margin-right: 32rpx;
					background-color: #a0e959;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #a0e959;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}


	.car {
		width: 100%;
		height: 300rpx;
		margin: 0 auto;
		background-image: radial-gradient(#f1cca855, #f1cca8FF);
		padding: 50rpx 30rpx;
		color: #E08A45;
		border-radius: 16px;
		position: relative;
		margin-top: 15px;

		.title {
			font-size: 50rpx;
			font-weight: 800;
			background-image: -webkit-linear-gradient(top, #f1cca8FF, #E08A45, #de6912);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			transform-origin: bottom right;
		}

		.bottom {
			position: relative;
			display: flex;
			top: 50rpx;
			justify-content: space-between;

			.text {
				line-height: 60rpx;
			}

			.but {
				background: #E08A45;
				color: #ffd8b2;
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
			}
		}
	}



	// <view class="end_message">
	// 	<view class="top_bg">
	// 		<view class="tops">
	// 			<view>您可获赔总金额</view>
	// 			<view>结果仅供参考</view>
	// 		</view>
	// 		<view class="center">
	// 			500000 <span>元</span>
	// 		</view>
	// 		<view class="btn">
	// 			在证据充足的情况下，您通过维权可获得赔
	// 		</view>
	// 	</view>
	// 	<view class="btn_bg">
	// 		<view class="mingxi">赔偿金额明细</view>
	// 		<view class="title">
	// 			<view class="left_sub_box">
	// 				<view class="yuan">1</view>
	// 				拖欠工资赔偿
	// 			</view>
	// 			<view class="price_box">
	// 				50000 <span>元</span>
	// 			</view>
	// 		</view>
	// 	</view>
	// </view>



	.end_message {
		border-radius: 15px;
		margin-top: 15px;
		background: #fff;

		.top_bg {
			background-image: radial-gradient(#f1cca855, #f1cca8FF);
			padding: 15px;
			border-radius: 15px 15px 0px 0px;

			.tops {
				display: flex;
				justify-content: space-between;
				color: #E08A45;
				font-size: 16px;
			}

			.center {
				margin-top: 15px;
				color: #f96f00;
				font-size: 42px;
				line-height: 50px;

				span {
					font-size: 16px;
				}
			}

			.btn {
				color: #E08A45;
				font-size: 12px;
			}
		}

		.btn_bg {
			margin-top: 15px;
			padding: 15px;

			.mingxi {
				font-size: 16px;
				font-weight: bold;
			}

			.title {
				display: flex;
				justify-content: space-between;
				margin-top: 15px;

				.left_sub_box {
					display: flex;
					height: 25px;
					line-height: 25px;

					.yuan {
						background: #f1cca8FF;
						height: 25px;
						width: 25px;
						border-radius: 50%;
						text-align: center;
						line-height: 25px;
						color: #E08A45;
						margin-right: 5px;
					}
				}

				.price_box {
					span {}
				}
			}
		}
	}
</style>